<header class="header-container" ng-include="'/partials/header.html'"></header>
<div class="middle-container issues-view">
    <div class="view-header">
        <p class="title">{{ 'issue.issue-ref'|i18next:{ref: issue.ref} }}</p>
        <div class="buttons">
            <a class="button"
               i18next="pagination.prev"
               ng-show="issue.neighbors.previous.ref"
               ng-href="{{ urls.issuesUrl(projectSlug, issue.neighbors.previous.ref, false) }}">Previous</a>
            <a class="button"
               i18next="pagination.next"
               ng-show="issue.neighbors.next.ref"
               ng-href="{{ urls.issuesUrl(projectSlug, issue.neighbors.next.ref, false) }}">Next</a>
            <a class="button button-delete" ng-click="ctrl.removeObject(issue)" i18next="issue.delete-issue">Delete issue</a>
        </div>
    </div>
    <ul class="tags-list">
        <li class="tag" ng-repeat="tag in issue.tags" gm-colorize-tag="tag">{{ tag }}</li>
    </ul>
    <div class="row-fluid issue-data">
        <div class="span8 issue-data-description">
            <h2>{{ issue.subject }}</h2>
            <div class="blocked-alert" ng-show="issue.is_blocked">
                <div class="icon blocked"data-icon="o"></div>
                <div class="reasons" ng-bind-html="issue.blocked_note_html"></div>
            </div>
            <div ng-bind-html="issue.description_html"></div>
            <div class="attachments" ng-show="attachments.length > 0 || newAttachments[0].status != undefined">
                <h3 data-icon="E" i18next="issue.attachments">Attachments</h3>
                <ul class="attachments-items">
                    <li class="attachments-item" ng-repeat="attachment in attachments">
                        <a class="delete" data-icon="h" href="" title="Delete attachment"
                           ng-click="ctrl.removeAttachment(attachment)" i18next="title:issue.delete-attachment"></a>
                        <a href="{{ attachment.url }}" target="_blank">{{ attachment.name }}</a>
                        <span>[{{ attachment.size|sizeFormat }}]</span>
                        <span>{{ "issue.on-date"|i18next:{date:momentFormat(attachment.created_date, 'LLLL')} }}</span>
                    </li>
                </ul>
                <ul class="attachments-items in-progress">
                    <li class="attachments-item" ng-repeat="attachment in newAttachments">
                        <div ng-show="attachment.status != undefined">
                            <span ng-show="attachment.status == 'done'"
                                  class="status done" data-icon="z"></span>
                            <span ng-show="attachment.status == 'in-progress'"
                                  class="status in-progress spinner"></span>
                            <span ng-show="attachment.status == 'error'"
                                  class="status error" data-icon="o"></span>
                            <div class="progress-bar">
                                <span style="width: {{ attachment.uploadPercent }}%;">
                                    {{ attachment.uploadPercent }} %
                                </span>
                            </div>
                            <span class="progress-data">({{ attachment.progressSizeData }})</span>
                            <span class="name">{{ attachment.name }}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="span4 issue-metadata">
            <div class="info-header">
                <h3 i18next="issue.issue-data">Issue data</h3>
            </div>
            <ul class="info-rows">
                <li data-icon="t">
                    <strong i18next="issue.added-by">Added by:</strong>
                    <span gm-colorize-user="constants.users[issue.owner]">{{ constants.users[issue.owner].full_name }}</span>
                </li>
                <li data-icon="u">
                    <strong i18next="issue.assigned-to">Assigned to:</strong>
                    <span gm-colorize-user="constants.users[issue.assigned_to]">
                        {{ constants.users[issue.assigned_to].full_name || t("issue.unassigned") }}
                    </span>
                </li>
                <li data-icon="w">
                    <strong i18next="issue.created">Created:</strong>
                    {{ issue.created_date|momentFormat:"LLLL" }}
                </li>
                <li data-icon="x">
                    <strong i18next="issue.updated">Updated:</strong>
                    {{ issue.modified_date|momentFormat:"LLLL" }}
                </li>
                <li data-icon="w" ng-show="issue.finished_date">
                    <strong i18next="issue.finished">Finished:</strong>
                    {{ issue.finished_date|momentFormat:"LLLL" }}
                </li>
                <li data-icon="a" class="type-{{ issue.type }}">
                    <strong i18next="issue.type">Type:</strong>
                    {{ constants.issueTypes[issue.type].name }}
                </li>
                <li data-icon="y" class="status-{{ issue.status }}">
                    <strong i18next="issue.status">Status:</strong>
                    {{ constants.issueStatuses[issue.status].name }}
                </li>
                <li data-icon="o" class="priority-{{ issue.priority }}">
                    <strong i18next="issue.priority">Priority:</strong>
                    {{ constants.priorities[issue.priority].name }}
                </li>
                <li data-icon="H" class="severity-{{ issue.severity }}">
                    <strong i18next="issue.severity">Severity:</strong>
                    {{ constants.severities[issue.severity].name }}
                </li>
                <li data-icon="z">
                    <strong i18next="issue.attachments-count">Attachments:</strong>
                    {{ attachments.length }}
                </li>
                <li data-icon="f" ng-show="issue.generated_user_stories">
                    <strong i18next="issue.generated-user-stories">Generated user stories:</strong>
                    <span>
                        <ul>
                            <li ng-repeat="us in issue.generated_user_stories" class="us-link">
                                <a href="{{ urls.userStoryUrl(projectSlug, us.ref, false) }}">
                                    #{{ us.ref }} {{ us.subject }}
                                </a>
                            </li>
                        </ul>
                    </span>
                </li>
            </ul>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <div class="update-form">
                <h4 i18next="issue.update-issue">Update issue</h4>

                <form class="form-horizontal" gm-checksley-form="ctrl.submit()">
                    <div>
                        <fieldset class="issue-type">
                            <label i18next="issue.type-label">Type</label>
                            <select name="type" ng-model="form.type" data-required="true"
                                data-error-message="Required"
                                ng-options="c.id as c.name for c in constants.issueTypesList|orderBy:'order'"></select>
                            </select>
                        </fieldset>
                        <fieldset class="issue-status">
                            <label i18next="issue.status-label" class="control-label" for="inputEmail">Status</label>

                            <select class="status" name="status" ng-model="form.status"
                                    data-required="true"  data-type="number"
                                    data-error-message="Required"
                                    ng-options="c.id as c.name for c in constants.issueStatusesList|orderBy:'order'"></select>
                        </fieldset>
                    </div>

                    <div>
                        <fieldset class="issue-priority">
                            <label i18next="issue.priority-label">Priority</label>

                            <select class="priority status" name="priority"
                                    ng-model="form.priority" data-required="true"
                                    data-type="number" data-error-message="Required"
                                    ng-options="c.id as c.name for c in constants.prioritiesList|orderBy:'order'"></select>
                        </fieldset>
                        <fieldset class="issue-severity">
                            <label i18next="issue.severity-label">Severity</label>

                            <select class="severity status" name="severity"
                                    ng-model="form.severity" data-required="true"
                                    data-type="number" data-error-message="Required"
                                    ng-options="c.id as c.name for c in constants.severitiesList|orderBy:'order'"></select>
                        </fieldset>
                    </div>
                    <div>
                        <fieldset class="issue-assigned">
                            <label i18next="issue.assigned-to-label">Assigned to</label>

                            <select class="assigned-to" name="assigned_to"
                                    ng-model="form.assigned_to"
                                    ui-select2="assignedToSelectOptions"
                                    data-error-message="Required">
                                <option value="" i18next="issue.unassigned">Unassigned</option>
                                <option ng-repeat="m in project.active_memberships" value="{{ m.user }}">
                                    {{ m.full_name }}
                                </option>
                            </select>
                        </fieldset>
                        <fieldset class="issue-tags">
                            <label i18next="issue.tags-label">Tags</label>
                            <input type="text" name="tags"
                                   ng-model="form.tags" ui-select2="tagsSelectOptions"
                                   data-placeholder="{{'issue.tags-placeholder'|i18next }}" />
                        </fieldset>
                    </div>
                    <div>
                        <fieldset class="issue-blocked">
                            <input type="checkbox"id="is-blocked" class="hidden"
                                   ng-model="form.is_blocked" name="is_blocked">
                            <label for="is-blocked">
                                <span data-icon="o" class="icon blocked"></span>
                                <span i18next="issue.is-blocked">Is blocked</span>
                            </label>
                        </fieldset>
                    </div>
                    <div ng-show="form.is_blocked">
                        <fieldset class="issue-blocked-reasons">
                            <label i18next="issue.blocking-reasons">Reasons for blocking</label>
                            <textarea class="blocked-note" name="blocked_note"
                                      placeholder="Some reasons..."
                                      i18next="placeholder:issue.blocking-reasons-placeholder"
                                      ng-model="form.blocked_note" gm-markitup preview-id="blocked-preview"></textarea>
                            <div id="blocked-preview" class="preview"></div>
                        </fieldset>
                    </div>
                    <div ng-hide="_showHiddenGroups">
                        <p style="cursor: pointer" ng-click="_showHiddenGroups=true" i18next="issue.edit-subject-description">
                            Edit <b>Subject</b> and <b>Description</b>...
                        </p>
                    </div>

                    <fieldset class="issue-subject" ng-show="_showHiddenGroups">
                        <label for="inputEmail" i18next="issue.subject-label">Subject</label>
                        <input type="text" name="subject" ng-model="form.subject"></input>
                    </fieldset>

                    <fieldset class="issue-description" ng-show="_showHiddenGroups">
                        <label for="inputEmail" i18next="issue.description-label">Description</label>
                        <textarea name="description" ng-model="form.description" gm-markitup preview-id="description-preview"></textarea>
                        <div id="description-preview" class="preview"></div>
                    </fieldset>

                    <fieldset class="issue-watchers">
                        <label i18next="issue.watchers-label">Watchers</label>
                        <select name="watchers" multiple
                                ng-model="form.watchers" ui-select2="watcherSelectOptions"
                                data-placeholder="{{ 'issue.watchers-placeholder'|i18next }}">
                            <option ng-repeat="m in project.active_memberships" value="{{ m.user }}">
                                {{ m.full_name }}
                            </option>
                        </select>
                    </fieldset>

                    <fieldset class="issue-comment">
                        <label for="inputEmail" i18next="issue.comment-label">Comment</label>
                        <textarea name="comment" ng-model="form.comment" gm-markitup preview-id="comment-preview"></textarea>
                        <div id="comment-preview"></div>
                    </fieldset>

                    <fieldset class="issue-attachment">
                        <a class="add-attachment" data-icon="E" title="Add attachments"
                            gm-forward-click="#attachment_file_input" href=""
                            i18next="title:issue.add-attachments,issue.add-attachments">
                            Add attachments
                        </a>
                        <ul class="attachments-items">
                            <li class="attachments-item"
                                ng-repeat="attachment in newAttachments">
                                <a class="delete" data-icon="h" href=""
                                   title="Delete the new attachment"
                                   i18next="title:issue.delete-new-attachment"
                                   ng-click="ctrl.removeNewAttachment(attachment)"></a>
                                <span>{{ attachment.name }}</span>
                                <span>[{{ attachment.size|sizeFormat }}]</span>
                            </li>
                        </ul>
                        <input type="file" class="hidden" name="newAttachments"
                               id="attachment_file_input" multiple="multiple"
                               gm-files="newAttachments"/>
                    </fieldset>

                    <fieldset class="issue-edit-submit submit">
                        <button type="submit" class="button button-edit"
                                gm-checksley-submit-button i18next="issue.save">Save</button>

                        <div gm-spinner class="spinner-container"></div>
                        <a href="" class="button button-generate-us" ng-click="ctrl.openCreateUserStoryForm()"
                           i18next="issue.generate-new-user-story">Generate a new user story</a>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <div class="history" gm-history="issue"
                 data-history-type="issue"
                 data-object-id="issueId">
            </div>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <div class="view-footer">
                <p class="title">{{ 'issue.issue-ref'|i18next:{ref: issue.ref} }}</p>
                <div class="buttons">
                    <a class="button"
                       i18next="pagination.prev"
                       ng-show="issue.neighbors.previous.ref"
                       ng-href="{{urls.issuesUrl(projectSlug, issue.neighbors.previous.ref)}}">Previous</a>
                    <a class="button"
                       i18next="pagination.next"
                       ng-show="issue.neighbors.next.ref"
                       ng-href="{{urls.issuesUrl(projectSlug, issue.neighbors.next.ref)}}">Next</a>
                    <a class="button button-delete" ng-click="ctrl.removeObject(issue)" i18next="issue.delete-issue">Delete issue</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- user story form -->
<div id="user-story-modalform"
    gm-modal="generate-user-story-form"
    ng-show="formOpened"
    ng-controller="IssueUserStoryModalController as issUsModal">

    <div class="new-us-modal modal">
        <form class="inline-form us-form" gm-checksley-form="issUsModal.submit()">
            <div class="modal-header">
                <h3 i18next="issue.us-modal-create-user-story-from-this-issue">Create user story from this issue</h3>
            </div>
            <div class="modal-body">
                <fieldset class="fieldset-row">
                    <fieldset>
                        <label i18next="issue.us-modal-subject">Subject</label>
                        <input class="subject" type="text" ng-model="form.subject" data-required="true"
                               name="subject" placeholder="A descriptive name..." data-maxlength="500"
                               i18next="placeholder:issue.us-modal-subject-placeholder"></input>
                    </fieldset>
                </fieldset>
                <div class="fieldset-row" gm-role-points-edition></div>
                <div class="fieldset-row clearfix status-tags">
                    <fieldset>
                        <label i18next="issue.us-modal-status">Status</label>
                        <select class="status" name="status" ng-model="form.status"
                            data-type="number" data-required="true"
                            data-error-message="This field is required."
                            ng-options="c.id as c.name for c in constants.usStatusesList|orderBy:'order'"
                            i18next="data-error-message:field-required"
                            ></select>
                        </select>
                    </fieldset>
                    <fieldset>
                        <label i18next="issue.us-modal-tags">Tags</label>
                        <input type="text" name="tags"
                               ng-model="form.tags" ui-select2="tagsSelectOptions"
                               data-placeholder="{{'issue.us-modal-tags-placeholder'|i18next }}" />
                    </fieldset>
                </div>
                <div class="fieldset-row requirements">
                    <fieldset>
                        <input type="checkbox" id="us-modal-client-requirement" class="hidden"
                               ng-model="form.client_requirement" name="client_requirement"/>
                        <label for="us-modal-client-requirement">
                            <span data-icon="J" class="icon client-requirement"></span>
                            <span i18next="issue.us-modal-client-requirement">Client Requirement</span>
                        </label>
                    </fieldset>
                    <fieldset>
                        <input type="checkbox"id="us-modal-team-requirement" class="hidden"
                               ng-model="form.team_requirement" name="team_requirement">
                        <label for="us-modal-team-requirement">
                            <span data-icon="N" class="icon team-requirement"></span>
                            <span i18next="issue.us-modal-team-requirement">Team Requirement</span>
                        </label>
                    </fieldset>
                    <fieldset>
                        <input type="checkbox"id="us-modal-is-blocked" class="hidden"
                               ng-model="form.is_blocked" name="is_blocked">
                        <label for="us-modal-is-blocked">
                            <span data-icon="o" class="icon blocked"></span>
                            <span i18next="issue.us-modal-is-blocked">Is blocked</span>
                        </label>
                    </fieldset>
                </div>
                <fieldset class="fieldset-row" ng-show="form.is_blocked">
                    <label i18next="issue.us-modal-blocking-reasons">Reasons for blocking</label>
                    <textarea class="blocked-note" name="blocked_note"
                              placeholder="Some reasons..."
                              i18next="placeholder:issue.us-modal-blocking-reasons-placeholder"
                              ng-model="form.blocked_note"
                              gm-markitup preview-id="us-modal-blocked-preview"></textarea>
                    <div id="us-modal-blocked-preview" class="preview"></div>
                </fieldset>
                <fieldset class="fieldset-row">
                    <label i18next="issue.us-modal-description">Description</label>
                    <textarea class="description" name="description"
                              placeholder="A good description..."
                              i18next="placeholder:issue.us-modal-description-placeholder"
                              ng-model="form.description"
                              gm-markitup preview-id="us-modal-preview"></textarea>
                    <div id="us-modal-preview" class="preview"></div>
                </fieldset>
            </div>

            <div class="modal-footer">
                <div gm-spinner class="spinner-container"></div>
                <input type="submit" class="button button-success"
                       gm-checksley-submit-button value="Save" i18next="value:issue.us-modal-save" />
                <a href="" class="button button-cancel" ng-click="issUsModal.close()" i18next="issue.us-modal-close">Close</a>
            </div>
        </form>
    </div>
</div>

<script type="text/angular-template" id="change-template">
    <ul class="history-items">
        <li class="history-item" ng-repeat="hitem in historyItems">
            <div class="title">
                <span class="updated">
                    <span i18next="issue.updated-by-history">
                        Updated by
                    </span>
                    <span gm-colorize-user="hitem.by">{{ hitem.by.full_name }}</span></span>
                <span class="date">{{ hitem.modified_date|momentFromNow }}</span>
            </div>
            <div class="changes">
                <div class="change" ng-repeat="change in hitem.changes">
                    <strong>{{ change.name|capitalize }}</strong>:
                    <span ng-show="change.old != '' && change.old != null" ng-bind-html="'issue.change-from'|i18next:{value: change.old}"></span>
                    <span ng-bind-html="'issue.change-to'|i18next:{value: change.new||''}"></span>
                </div>
            </div>
            <div class="comment" ng-show="hitem.comment">
                <strong i18next="issue.comment-history">Comment:</strong>
                <div gm-render-markdown="hitem.comment_html"></div>
            </div>
        </li>
    </ul>
</script>
